<template>
<view class="container">
  <view class="brand-list">
    <navigator v-for="(item, index) in brandList" :key="index" :url="'../brandDetail/brandDetail?id=' + item.id" class="item">
      <view class="h">
        <view class="l">{{item.name}}</view>
        <view class="r">进店看看</view>
      </view>
      <view class="img-bg">
        <image :src="item.picUrl" background-size="cover"></image>
      </view>
      <view class="txt-box">
        <view class="line">
        </view>
      </view>
    </navigator>
  </view>
</view>
</template>

<script>
let util = require("../../utils/util.js");
let api = require("../../config/api.js");
let app = getApp();

export default {
  data() {
    return {
      brandList: [],
      page: 1,
      size: 10,
      totalPages: 1
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    this.getBrandList();
  },

  onReachBottom() {
    if (this.totalPages > this.page) {
      this.setData({
        page: this.page + 1
      });
    } else {
      return false;
    }

    this.getBrandList();
  },

  onReady: function () {},
  onShow: function () {// 页面显示
  },
  onHide: function () {// 页面隐藏
  },
  onUnload: function () {// 页面关闭
  },
  methods: {
    getBrandList: function () {
      uni.showLoading({
        title: '加载中...'
      });
      let that = this;
      util.request(api.BrandList, {
        page: that.page,
        size: that.size
      }).then(function (res) {
        if (res.errno === 0) {
          that.setData({
            brandList: that.brandList.concat(res.data.brandList),
            totalPages: res.data.totalPages
          });
        }

        uni.hideLoading();
      });
    }
  }
};
</script>
<style>
.brand-list .item {
  display: block;
  width: 750rpx;
  height: 500rpx;
  position: relative;
  background: #fff;
  margin-top: 5rpx;
  margin-bottom: 30rpx;
}

.brand-list .item .img-bg {
  position: absolute;
  left: 0;
  z-index: 0;
  width: 750rpx;
  height: 400rpx;
  overflow: hidden;
}

.brand-list .item .img-bg image {
  width: 750rpx;
  height: 400rpx;
}

.brand-list .item .txt-box {
  position: absolute;
  left: 0;
  top: 0;
  display: table;
  z-index: 0;
  width: 750rpx;
  height: 317rpx;
}

.brand-list .item .line {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 63rpx;
  line-height: 63rpx;
}

.brand-list .item .line text {
  font-size: 35rpx;
  font-weight: 700;
  text-shadow: 1rpx 1rpx rgba(0, 0, 0, 0.32);
  color: #fff;
}

.brand-list .item .line .s {
  padding: 0 10rpx;
  font-size: 40rpx;
}

.brand-list .h {
  height: 100rpx;
  line-height: 100rpx;
  margin-left: 31.25rpx;
  padding-right: 31.25rpx;
  border-bottom: 1px solid #f4f4f4;
  font-size: 30rpx;
  color: #333;
}

.brand-list .h .l {
  float: left;
}

.brand-list .h .r {
  float: right;
  margin-top: 19rpx;
  height: 64.5rpx;
  margin-right: 5rpx;
  line-height: 64.5rpx;
  text-align: center;
  padding: 0 20rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #fff;
  background: #FF654B;
}

</style>